<template>
  <!-- <div class="app-container"> -->
  <div> 
      <el-form>
        <el-form-item label="用户名" :modle="userInfo" ref="userInfo">
          <el-input v-model.trim="userInfo.userAccount" :disabled="true"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userInfo.userPassword" :disabled="true"/>
        </el-form-item>
        <el-form-item label="用户角色">
          <el-input v-model.trim="userInfo.userRole" :disabled="true" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="userInfo.userName" :disabled="true"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="userInfo.userGender" :disabled="true"/>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model.trim="userInfo.userTele" :disabled="true"/>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model.trim="userInfo.userEmail" :disabled="true"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEdit" plain>修改</el-button>
        </el-form-item>
      </el-form>
  
    <!-- //对话框   -->
      <el-dialog :title="formTitle[dialogState]" :visible.sync="dialogFormVisible">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
          <el-form-item label="用户编号" prop="userCode" label-width="80px">
            <el-input v-model="temp.userCode" placeholder="请填写用户编号"  :disabled='true'/>
          </el-form-item>
          <el-form-item label="用户名称" prop="userName" label-width="80px">
            <el-input v-model="temp.userName" placeholder="请填写用户名称" />
          </el-form-item>

          <el-form-item label="性别" prop="userGender" label-width="80px">
            <el-select v-model="temp.userGender" class="filter-item" placeholder="请选择用户性别" >
              <el-option v-for="item in gender" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="用户角色" prop="userRole" label-width="80px">
            <el-input v-model="temp.userRole" placeholder="请填写用户角色" :disabled='true'/>
          </el-form-item>
          <el-form-item label="电话号码" prop="userteleNumber" label-width="80px">
            <el-input v-model="temp.userTele" placeholder="请填写电话号码" />
          </el-form-item>
          <el-form-item label="邮箱" prop="userEmail" label-width="80px">
            <el-input v-model="temp.userEmail" placeholder="请填写邮箱" />
          </el-form-item>

          <el-form-item label="账号" prop="userAccount" label-width="80px">
            <el-input v-model="temp.userAccount" placeholder="请填写用户账号" disabled />
          </el-form-item>

          <el-form-item label="密码" prop="userPassword" label-width="80px">
            <el-input v-model="temp.userPassword" placeholder="请填写用户密码" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" plain>
            取消
          </el-button>
          <el-button type="primary" plain @click="dialogState==='add'?AddData():editData()">
            确定
          </el-button>
        </div>
      </el-dialog>
  </div> 
</template>


<script>
import { editUserInfo, getList,findUserById } from '@/api/userInfo'
import { mapGetters } from 'vuex'
export default {
  data(){
    return{
      dialogState:'',
      userInfo:{
        userId:'',
        userCode:'',
        userName:'',
        userGender:'',
        userRole:'',
        userTele:'',
        userEmail:'',
        userState:'',
        userAccount:'',
        userPassword:''
      },
      gender:['男','女'],
      //表格
      temp:{
        userId:'',
        userCode:'',
        userName:'',
        userGender:'',
        userRole:'',
        userTele:'',
        userEmail:'',
        userState:'',
        userAccount:'',
        userPassword:''
      },
      rules:{
        //验证用户编号——只能数字+英文,不能包含特殊字符
        userCode: [{ required: true, message: '用户编号不能为空', trigger: 'blur' },
          {pattern:/^[a-zA-Z0-9]+$/, message: '不能包含特殊字符', trigger: ['blur','change'] },
          {min:2, max:6 ,message:'用户编号不少于2位不长于6位',trigger:['blur','change']}],
        userName: [{ required: true, message: '用户名称不能为空', trigger:  'blur' },
          {min:2, max:10 ,message:'用户名称不少于2位不长于10位',trigger:['blur','change']}],
        userGender: [{ required: true, message: '请选择用户性别', trigger: 'blur' }],
        userRole: [{ required: true, message: '请填写用户角色', trigger: 'blur' }],
        //验证手机号码
        userTele: [{required: true, message: '手机号码不能为空', trigger: 'blur' },
          {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,  message: '请填写正确的手机号码', trigger: ['blur','change'] }],
        //验证邮箱
        userEmail: [{ required: true, message: '邮箱不能为空', trigger: 'blur' },
         {type:'email',message: '邮箱格式不正确', trigger: ['blur','change'] }],
        userState: [{ required: true, message: '请选择用户状态', trigger: 'change' }],
        userAccount:[{required: true, message: '用户账号不能为空', trigger: 'blur' },
          { pattern:/^[a-zA-Z0-9]+$/, required: true, message:'不能包含特殊字符',trigger:'change'},
          {min:5, max:15 ,message:'账号长度不少于5位不长于15位',trigger:['blur','change']}],
        userPassword:[{ required: true, message:'密码不能为空',trigger:'blur'},
          { pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
            message:'6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种',
            trigger:['blur','change']},]
      },
      formTitle:{       //弹窗标题
        add:'新增用户信息',
        edit:'修改用户信息'
      },
      dialogFormVisible: false,
    }   
  },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: '',
          email: '',
          role:''
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  created(){
    this.fetchData()
  },
  methods: {
    fetchData(){
      findUserById(this.userId).then(res =>{
        this.userInfo = res.data
      })
    },
    submit() {
      this.$message({
        message: '用户信息更新完成',
        type: 'success',
        duration: 5 * 1000
      })
    },
    //编辑操作
    handleEdit(row){
      this.temp = this.userInfo
      this.dialogState = 'edit'
      this.dialogFormVisible = true
      console.log("编辑按钮被点击了")
      console.log("从vuex取到的信息为:",this.userId)
      this.$nextTick(() => {
        //重置表单校验
        this.$refs['dataForm'].clearValidate()
      })
    },
    //编辑信息
    editData(){
      console.log("读到的表单信息:",this.temp)
      this.$refs['dataForm'].validate((valid)=>{
        if(valid){
          // console.log(this.scope.row.userId)
          editUserInfo(this.temp).then(()=>{
            this.fetchData()
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: '修改成功！',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
  }
}
</script>
